<template>
  <div>
    <input type="text" v-model="count1" @input="changeInput">
    <p>{{ count }}</p>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, onMounted, defineEmits } from 'vue'
const count1 = ref(0)
// 定义props
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})

// 监听props变化 第一个参数得是一个函数
watch(() => props.count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, { immediate: true, deep: true })

onMounted(() => {
  count1.value = props.count
})
// 定义事件 
const emit = defineEmits(['changeInput'])
const changeInput = () => {
  emit('changeInput', count1.value)
}

</script>

<style lang="scss" scoped>

</style>